<!DOCTYPE html>
<html>
<head>
    <title>取货助手 -- 快件e栈服务平台</title>
    <meta charset="utf-8">
    <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>
    <link href="../css/normalize.css" rel="stylesheet" type="text/css"/>
    <link href="../css/common.css" rel="stylesheet" type="text/css"/>
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/common.js" type="text/javascript"></script>
    <script src="../js/notice.js" type="text/javascript"></script>
    <script src="../js/regexp.js" type="text/javascript"></script>
    <script src="../js/jweixin-1.2.0.js" type="text/javascript"></script>
    <script src="../js/layer/layer.js"></script>
    <script type="text/javascript">
        $.ajax({
            url: "/wxconf.do",
            type: "GET",
            data: "xurl=" + location.href.split('#')[0],
            success: function (data) {
                // data = JSON.parse(data);
                wx.config({
                    //参数是否展示  提示出参数
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: data.appid, // 必填，公众号的唯一标识
                    timestamp: data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.nonceStr, // 必填，生成签名的随机串
                    signature: data.signature,// 必填，签名
                    jsApiList: ['startRecord', 'stopRecord', 'scanQRCode', 'playVoice', 'uploadVoice', 'downloadVoice', 'onVoiceRecordEnd', 'translateVoice'
                        , 'downloadVoice', 'onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
                });
            }, error: function (e) {
                // alert(e.responseText);
            }
        });

        wx.ready(function () {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            $("#scanQRCodeBtn").click(x1);
        });
        wx.error(function (res) {
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            alert("扫描错误")
        });

        var code = null;
        var userPhone = null;

        function x1() {
            wx.scanQRCode({
                needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                success: function (res) {
                    $(".expUserInfoNull").hide(300);
                    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果

                    //快递码 快递取件码
                    if (result.indexOf("express_") == 0) {
                        code = result.substring(8);
                        $("#expPickUserId").val(code);
                    } else {
                        //用户码 手机号
                        if (result.indexOf("userPhone_") == 0) {
                            userPhone = result.substring(10);
                            $("#expressUserInfoCont").html();
                            getExpressByStatus();
                        }
                    }

                }
            });
        }

        function getExpressByStatus() {
            $("#expressUserInfoCont").html("");
            $.getJSON("/wx/userExpressByStatusList.do", {userPhone: userPhone}, function (rs) {
                if (rs.status == -1) {
                    $(".expUserInfoNull").fadeIn(300);
                    layer.msg(rs.result);
                } else {

                    // {"status":0,"data":{
                    // "status0":[{"id":103,"number":"332123","username":"123123","userphone":"123123","company":"爱沙尼亚邮政","code":"504673","intime":"2021-05-25 16:42:42","outtime":"未出库","status":"待取件","sysPhone":"18888888888"},{"id":104,"number":"7755","username":"123123","userphone":"123123","company":"顺丰速运","code":"884338","intime":"2021-05-25 17:04:07","outtime":"未出库","status":"待取件","sysPhone":"18888888888"}],
                    // "status1":[{"id":109,"number":"122232","username":"柏竹1","userphone":"123123","company":"澳大利亚邮政","code":"已取件","intime":"2021-05-13 09:46:45","outtime":"2021-05-30 09:46:50","status":"已取件","sysPhone":"18888888888"},{"id":106,"number":"1231234","username":"柏竹4","userphone":"123123","company":"阿根廷邮政","code":"已取件","intime":"2021-05-30 08:17:12","outtime":"2021-05-28 09:44:17","status":"已取件","sysPhone":"18888888888"}]}}

                    var list0 = rs.data.status0;
                    for (let i = 0; i < list0.length; i++) {
                        var item = "<div class=\"expInfoCont status1\">\n" +
                            "\t\t\t<table>\n" +
                            "\t\t\t\t<tr>\n" +
                            "\t\t\t\t\t<td>快递公司：</td><td>" + list0[i].company + "</td>\n" +
                            "\t\t\t\t</tr>\n" +
                            "\t\t\t\t<tr>\n" +
                            "\t\t\t\t\t<td>快递单号：</td><td>" + list0[i].number + "</td>\n" +
                            "\t\t\t\t</tr>\n" +
                            "\t\t\t\t<tr>\n" +
                            "\t\t\t\t\t<td>到件时间：</td><td>" + list0[i].intime + "</td>\n" +
                            "\t\t\t\t</tr>\n" +
                            "\t\t\t\t<tr>\n" +
                            "\t\t\t\t\t<td>取件码：</td><td>" + list0[i].code + "</td>\n" +
                            "\t\t\t\t</tr>\n" +
                            "\t\t\t</table>\n" +
                            "\t\t\t<div class=\"btns\">\n" +
                            "\t\t\t\t<button class=\"btn-success\" onclick=\"updateStatus('" + list0[i].code + "')\">确认收货</button>\n" +
                            "\t\t\t</div>\n" +
                            "\t\t</div>";
                        $("#expressUserInfoCont").append($(item));
                    }

                    var list1 = rs.data.status1;
                    for (var i = 0; i < list1.length ; i++) {
                        var item = "<div class=\"expInfoCont status2\">\n" +
                            "        \t<table>\n" +
                            "        \t\t<tr>\n" +
                            "        \t\t\t<td>快递公司：</td><td>" + list1[i].company + "</td>\n" +
                            "        \t\t</tr>\n" +
                            "        \t\t<tr>\n" +
                            "        \t\t\t<td>快递单号：</td><td>" + list1[i].number + "</td>\n" +
                            "        \t\t</tr>\n" +
                            "        \t\t<tr>\n" +
                            "        \t\t\t<td>到件时间：</td><td>" + list1[i].intime + "</td>\n" +
                            "        \t\t</tr>\n" +
                            "        \t\t<tr>\n" +
                            "        \t\t\t<td>取件时间：</td><td>" + list1[i].outtime + "</td>\n" +
                            "        \t\t</tr>\n" +
                            "        \t</table>\n" +
                            "        \t<div class=\"status2_bg\"><img src=\"../images/status2_bg.png\"></div>\n" +
                            "        </div>";
                        $("#expressUserInfoCont").append($(item));
                    }

                }
            });
        }

        function find() {
            $("#expressUserInfoCont").html("");
            var code = $("#expPickUserId").val();
            var windowId = layer.load();
            $.getJSON("/wx/findExpressByCode.do", {code: code}, function (rs) {
                layer.close(windowId);
                if (rs.status == -1) {
                    layer.msg(rs.result);
                } else {
                    var list = rs.data;
                    for (let i = 0; i < list.length; i++) {
                        var item = "<div class=\"expInfoCont status1\">\n" +
                            "\t\t\t<table>\n" +
                            "\t\t\t\t<tr>\n" +
                            "\t\t\t\t\t<td>快递公司：</td><td>" + list[i].company + "</td>\n" +
                            "\t\t\t\t</tr>\n" +
                            "\t\t\t\t<tr>\n" +
                            "\t\t\t\t\t<td>快递单号：</td><td>" + list[i].number + "</td>\n" +
                            "\t\t\t\t</tr>\n" +
                            "\t\t\t\t<tr>\n" +
                            "\t\t\t\t\t<td>到件时间：</td><td>" + list[i].intime + "</td>\n" +
                            "\t\t\t\t</tr>\n" +
                            "\t\t\t\t<tr>\n" +
                            "\t\t\t\t\t<td>取件码：</td><td>" + list[i].code + "</td>\n" +
                            "\t\t\t\t</tr>\n" +
                            "\t\t\t</table>\n" +
                            "\t\t\t<div class=\"btns\">\n" +
                            "\t\t\t\t<button class=\"btn-success\" onclick=\"updateStatus('" + list[i].code + "')\">确认收货</button>\n" +
                            "\t\t\t</div>\n" +
                            "\t\t</div>";
                        $("#expressUserInfoCont").append($(item));
                    }
                }
            });
        }

        function updateStatus(code) {
            if (confirm("确认签收此快件？")) {
                var windowId = layer.load();
                $.getJSON("/wx/updateStatus.do", {code: code}, function (rs) {
                    layer.close(windowId);
                    layer.msg(rs.result);
                    $("#expressUserInfoCont").html("");
                    getExpressByStatus();
                });
            }
        }

    </script>
    <style type="text/css">
        .expPickCont {
            padding-bottom: 20px;
        }

        .expPickCont .expPickIcon {
            width: 15%;
            margin: 0 auto;
            text-align: center;
        }

        .expPickCont .expPicTitle {
            text-align: center;
            font-weight: bold;
        }

        .searchInfoBtn {
            width: 90%;
            margin: 0 auto;
            text-align: center;
            line-height: 46px;
            border-radius: 23px;
            background: #1f72ff;
            color: #fff;
            font-weight: bolder;
        }

        .expUserInfoCont {
            width: 90%;
            margin: 20px auto 20px;
            font-size: 14px;
        }

        .expUserInfoNull {
            width: 100%;
            line-height: 150px;
            text-align: center;
            color: #888888;
            display: none;
        }

        .expInfoCont {
            width: 100%;
            box-sizing: border-box;
            background-color: #fff;
            border-radius: 10px;
            padding: 30px;
        }

        .expInfoCont td:nth-of-type(1) {
            text-align: right;
            height: 2em;
            line-height: 2em;
        }

        .expInfoCont > .btns {
            border-top: 1px dashed #666;
            padding-top: 20px;
            text-align: right;
            margin-top: 10px;
        }

        .btn-success {
            padding: 5px 15px;
            color: #fff;
            background: #2F9925;
            border: 1px solid #fff;
            border-radius: 5px;
        }

        .status2 {
            position: relative;
        }

        .status2_bg {
            position: absolute;
            left: 0px;
            top: 0px;
            bottom: 0px;
            right: 0px;
        }

        .status2_bg > img {
            width: 30%;
            margin: 0 auto;
            margin-top: 50px;
            opacity: 0.5;

        }

        /*.status1 {*/
        /*    display: auto;*/
        /*}*/

        /*.status2 {*/
        /*    display: none;*/
        /*}*/
    </style>
</head>
<body>
<div class="content">
    <div class="headerNav">
        <div class="headerNavTop">
            <div class="headerNavIcon headerNavIconOut"><span></span><span></span></div>
        </div>
        <div class="headerNavCont">
            <a href="../index.html">快递首页</a>
            <a href="/wx/views/wxUserhome.html">个人中心</a>
            <a href="../views/delivery.html">送货上门</a>
            <a href="../views/lazyboard.html">懒人排行</a>
            <a href="../views/expassistant.html">快递助手</a>
        </div>
    </div>

    <div class="expPickCont">
        <div class="expPickIcon">
            <img src="../images/pickexpicon.png" width="100%">
        </div>
        <p class="expPicTitle">确认取货</p>

        <div class="expPickInput">
            <form>
                <input id="PageContext" type="hidden" value="${pageContext.request.contextPath}"/>
                <input id="wxCode" type="hidden" value="${wxCode}"/>
                <div class="userInputCont">
                    <div class="inputTypeCont">
                        <div class="inputTitle">取货码</div>
                        <input class="commonInputFunc" id="expPickUserId" name="username" placeholder="请输入取货码"
                               type="text">
                        <div class="commonFuncBtnScan" id="scanQRCodeBtn"></div>
                    </div>
                </div>
            </form>
            <div class="searchInfoBtn" onclick="find()">查找信息</div>
        </div>
    </div>

    <div class="expUserInfoCont" id="expressUserInfoCont">

        <div class="expUserInfoNull">
            暂无查到相关信息
        </div>


        <!--<div class="expInfoCont status1">-->
        <!--	<table>-->
        <!--		<tr>-->
        <!--			<td>快递公司：</td><td>顺丰快递</td>-->
        <!--		</tr>-->
        <!--		<tr>-->
        <!--			<td>快递单号：</td><td>123456789456789</td>-->
        <!--		</tr>-->
        <!--		<tr>-->
        <!--			<td>到件时间：</td><td>2019-10-14 22:00</td>-->
        <!--		</tr>-->
        <!--		<tr>-->
        <!--			<td>取件码：</td><td>666777</td>-->
        <!--		</tr>-->
        <!--	</table>-->
        <!--	<div class="btns">-->
        <!--		<button class="btn-success">确认收货</button>-->
        <!--	</div>-->
        <!--</div>-->


        <!--<div class="expInfoCont status2">-->
        <!--	<table>-->
        <!--		<tr>-->
        <!--			<td>快递公司：</td><td>顺丰快递</td>-->
        <!--		</tr>-->
        <!--		<tr>-->
        <!--			<td>快递单号：</td><td>123456789456789</td>-->
        <!--		</tr>-->
        <!--		<tr>-->
        <!--			<td>到件时间：</td><td>2019-10-14 22:00</td>-->
        <!--		</tr>-->
        <!--		<tr>-->
        <!--			<td>取件时间：</td><td>2019-10-15 12:00</td>-->
        <!--		</tr>-->
        <!--	</table>-->
        <!--	<div class="status2_bg"><img src="../images/status2_bg.png"></div>-->
        <!--</div>-->


    </div>

</div>

</body>
</html>